<template>
  <div class="page ta-c" >
    <div style="padding-top: 65px;" v-if="!role">
      <div class="c-blue fs-4" style="padding-bottom: 12px;">身份信息可在【个人中心】中修改</div>
      <div class="fw" style="margin-bottom: 36px;font-size: 24px;">你的身份是</div>
      <div class="weui-flex w80" style="margin:0 auto">
        <div class="weui-flex__item" @tap="pageRole = 'teacher'">
          <div class="fs-xxl fw pdb-l">
            老师
            <image v-if="pageRole == 'teacher'" style="width: 25px;height: 25px;" src="https://ark-1256750454.cos.ap-shanghai.myqcloud.com/app-statics/icon-check.png" mode="widthFix"></image>
          </div>
          <image style="width: 136rpx;" src="https://ark-1256750454.cos.ap-shanghai.myqcloud.com/app-statics/teacher.png" mode="widthFix"></image>
        </div>
        <div class="weui-flex__item" @tap="pageRole = 'student'">
          <div class="fs-xxl fw pdb-l">
            学生
            <image v-if="pageRole == 'student'" style="width: 25px;height: 25px;" src="https://ark-1256750454.cos.ap-shanghai.myqcloud.com/app-statics/icon-check.png" mode="widthFix"></image>
          </div>
          <image style="width: 144rpx;" src="https://ark-1256750454.cos.ap-shanghai.myqcloud.com/app-statics/student.png" mode="widthFix"></image>
        </div>
      </div>
      <div class="bg-white pdh-l mgt-xl">
        <button type="button" class="ui btn primary" :class="{'disabled': !pageRole}" @tap="onEnter">完成</button>
      </div>
    </div>
    <loading-hard v-else></loading-hard>
    <page-common></page-common>
  </div>
</template>

<script>
import PageCommon from '@/components/page-common'
import LoadingHard from '@/components/loading-hard'
import TabBar from '@/components/tab-bar'
import { mapGetters, mapActions } from 'vuex'
import base from '@/mixins/base'
import * as $group from '@/api/group'

export default {
  mixins: [base],
  data () {
    return {
      pageRole: '',
      isPageNeedAuthUser: true
    }
  },
  components: {
    PageCommon,
    TabBar,
    LoadingHard
  },
  computed: {
    ...mapGetters([
      'role',
      'loginer'
    ])
  },
  methods: {
    ...mapActions([
      'setRole',
      'getUserInfo'
    ]),
    loginBack () {
      if (!this.role) return
      this.jump(this.role)
    },
    async bindGetUserInfo ({mp: { detail: {encryptedData, iv} }}) {
      this.getUserInfo({encryptedData, iv})
    },
    async onEnter () {
      try {
        if (!this.pageRole) return
        this.setRole(this.pageRole)
        let groups = await $group.getMys()
        if (groups.length > 0) {
          this.jump(this.pageRole)
          return
        }
        this.enter(this.pageRole)
      } catch (e) {
        this.$debug({err: e})
      }
    },
    jump (role) {
      if (role === 'teacher') {
        wx.redirectTo({
          url: '/pages/documents/main'
        })
      } else if (role === 'student') {
        wx.redirectTo({
          url: '/pages/user-progresses/main'
        })
      }
    },
    enter (role) {
      if (role === 'teacher') {
        wx.redirectTo({
          url: '/pages/teacher-index/main'
        })
      } else if (role === 'student') {
        wx.redirectTo({
          url: '/pages/user-progresses/main'
        })
      }
    }
  }
}
</script>

<style scoped>
.page {
  background-color: white;
  height: 100%;
}
.ui.btn.m{
  height: 92rpx;
  line-height: 0.6;
}
</style>
